<template>
  <div class="errorpage" ref="bgstar" id="bgstar" @click="gotowhere('app')">
    <!-- <h2>404 -- NotFound</h2> -->
    <img :src="pic" alt="" class="myimg" />

    <div class="down">剩余{{num}}秒</div>
    <span class="spandot" v-for="(l, i) in spanNum" :key="i" :style="l"></span>
  </div>
</template>

<script>
import pic from "@/assets/images/404.png";

// 定义一个定时器
var timer = null

export default {
  name: "notfound",
  data() {
    return {
      pic,
      spanNum: [],
      // 跳转倒计时
      num:5
    };
  },
  methods: {
    // 星星初始化
    spanListInit() {
      var width = document.querySelector("#bgstar").clientWidth;
      var height = document.querySelector("#bgstar").clientHeight;
      // console.log(width,height);
      for (let i = 0; i < 520; i++) {
        var left = Math.random() * width;
        var top = Math.random() * height;

        var scale = Math.random;
        var rate = 2.5 * Math.random();
        var r = Math.random() * 255;
        var g = Math.random() * 255;
        var b = Math.random() * 255;
        var opacity = Math.random();

        this.spanNum.push({
          left: left + "px",
          top: top + "px",
          background: `rgba(${r},${g},${b},${opacity})`,
          transform: `scale(${scale})`,
          animationDelay: rate + "s",
        });
      }
    },

    // 跳转倒计时函数
    timerDown(){
      timer = setInterval(()=>{
        if(this.num>0){
          this.num--
        }else{
          clearInterval(timer)
          timer = null
          // 跳转页面
          this.$router.push({name:'app'})
        }

      },1000)
    }
  },
  mounted() {
    this.spanListInit();
    // this.timerDown()
  },
  destroyed() {
    // 如果通过点击跳转，定时器还会继续执行，所以当前路由销毁后清除掉定时器
    clearInterval(timer)
    timer=null
  },
};
</script>

<style lang="scss" scoped >
// scope 独立的css作用域
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>